<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>测试文档无标题</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<h1>Hello</h1>
	<div id="box"></div>
	<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript">
	let lessons = [
		{title: '媒体查询响应式布局'},{title: 'FLEX 弹性盒模型'},{title: 'GRID 栅格系统'}
	];

	var html = `<ul>${lessons.map(item => `
		<li>${item.title}</li>
	`).join('')}</ul>`;

	function template() {
	  return `<ul>
	      ${lessons.map((item)=>`
	          <li>${item.title}</li>
	      `).join('')}
	  </ul>`;
	}

	console.log(html) ;
	console.log(template()) ;
	box.innerHTML = html
	</script>
</body>
</html>